<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="js/rem.js" type="text/javascript"></script>
    <title>报名信息</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
    <link rel="stylesheet" href="css/register_info.css" type="text/css">

</head>
<body>
<div id="register_main" class="active">
    <div class="nosignup">
        <p>暂无报名信息</p>
        <a href="" class="click_signup">点击报名</a>
    </div>
    <div class="sign_up_details">
        <p>报名信息</p><a href="" class="edit_details">修改</a>
        <div class="sign_up_item">
            <div>
                <label>真实姓名:</label>
                <input type="text" name="user_name"/>
            </div>
            <div>
                <label>年龄:</label>
                <input type="number" name="age"/>
            </div>
            <div>
                <label>所属地址:</label>
                <input name="district_id" readonly type="text">
                <!--<input id="value1" type="hidden" value="20,234,504"/>-->
            </div>
            <div>
                <label>所属单位:</label>
                <input name="company" type="text"/>
            </div>
            <div>
                <label>手机号码:</label>
                <input name="telephone" type="tel" pattern=""/>
            </div>
        </div>
        <div class="works_details">
            <p>暂无作品信息</p>
            <a href="javascript:addworks();" class="add_works">点击添加作品</a>
        </div>
    </div>
    <div class="details">
        <p>报名信息</p><a href="javascript:editworks();" class="edit_details">修改</a>
        <div class="details_item">
            <div>
                <label>真实姓名:</label>
                <input type="text" name="user_name"/>
            </div>
            <div>
                <label>年龄:</label>
                <input type="number" name="age"/>
            </div>
            <div>
                <label>所属地址:</label>
                <input name="district_id" readonly type="text">
                <!--<input id="value1" type="hidden" value="20,234,504"/>-->
            </div>
            <div>
                <label>所属单位:</label>
                <input name="company" type="text"/>
            </div>
            <div>
                <label>手机号码:</label>
                <input name="telephone" type="tel" pattern=""/>
            </div>
        </div>
        <div class="works_content">
            <p>作品信息</p><a href="javascript:editworks();" class="edit_details">修改</a>
            <div class="works_item">
                <div>
                    <label>作品名称:</label>
                    <input type="number" name="age"/>
                </div>
                <div>
                    <label>作品封面:</label>
                    <div class="works_img" id="works_img">
                        <img src="img/4-1.jpg">
                    </div>
                </div>
                <div>
                    <label>作品:</label>
                    <div class="video_button" id="upload_video">
                        <video src="img/video.mp4" controls="controls"></video>
                    </div>
                    <label>作品:</label>
                    <div class="audio_button" id="upload_audio">
                        <div class="audio_img">
                            <button type="button" onclick="pauseAudio(this)" class="play"></button>

                        </div>
                        <audio src="img/audio.mp3" controls="" autoplay></audio>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="add_works_alert">
    <div class="add_works_item">
        <a href="" class="video_works">音频作品</a><br>
        <a href="" class="audio_works">视频作品</a>
    </div>
</div>
<div class="edit_works_alert">
    <div class="edit_works_item">
        <a href="" class="video_works">编辑</a><br>
        <a href="" class="audio_works">删除</a>
    </div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript">
    function addworks() {
        $(".add_works_alert").css("display", "block")
    }

    function editworks() {
        $(".edit_works_alert").css("display", "block")
    }

    function pauseAudio(btn) {
        //分清 jquery 对象 和 dom对象
        var audio = $(btn).parent().siblings("audio")[0];

        if (audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    }
</script>
</body>
</html>